<!DOCTYPE html>
<html>
  <header>
    <meta charset="utf-8">
    <script src="https://djvu.js.org/assets/dist/djvu.js"></script>
    <script src="https://djvu.js.org/assets/dist/djvu_viewer.js"></script>
 
    <style>
      #for_viewer {
          height: 80vh;
          width: 90vw;
          margin: 5vh auto;
          border: 1px solid black;
      }
    </style>
  </header>

  <body>
    <div id="for_viewer"></div>
    <script>
      // save as a global value
      window.viewer = new DjVu.Viewer();
      viewer.render(document.querySelector("#for_viewer"));
      {
        //?url=#page=
        let url = location.search.substring(5);
        let page = 1;
        let lhash = location.hash;
        if(lhash)
          page = parseInt(lhash.substring(6),10);
        viewer.loadDocumentByUrl(url,{"pageNumber": page,});
      }
      window.addEventListener('hashchange', function() {
        let page = 1;
        let lhash = location.hash;
        if(lhash)
          page = parseInt(lhash.substring(6),10);
        viewer.configure({pageNumber: page,});
        /*
        viewer.store.dispatch({
          type: DjVu.Viewer.ActionTypes.SET_NEW_PAGE_NUMBER_ACTION,
          pageNumber: page,
          shouldScrollToPage: true,
        });
        */
      });
    </script>

  </body>

</html>
